import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    /**
     * 全局参数，用于组件之间
     */
    state: {
        userIslogin: true,
        userName: 'hzh',
    },
    /**
     * 用来计算state然后生成新的数据，绑定方式：@click="$store.getters.out_login"
     *
     * 1.绑定后需要对应的state发生变化才能修改
     */
    getters:{
        out_login(state){     //这里的state对应着上面这个state
            return !state.userIslogin;
        }
    }
    ,
    /**
     * 这个是用于绑定触发修改state参数的，绑定方式：@click="$store.commit('loginShow')"
     *
     * 1.mutations中的方法是不分组件的,假如你在xxx.js文件中的定义了loginShow方法,
     *      在其他文件中的一个loginShow方法,那么$store.commit('switch_dialog')会执行所有的loginShow方法。
     * 2.mutations里的操作必须是同步的。
     */
    mutations: {
        loginShow(state) {   //这里的state对应着上面这个state
            state.userIslogin = !state.userIslogin;
        },
    },
    /**
     * 这个用于触发多个mutations操作的，绑定方式：@click="$store.dispatch('loginShow')"
     *
     * 多个state的操作,使用mutations会来触发多个state的值修改，很好用的,那么需要执行多个 mutations 就需要用 action 了
     */
    actions: {
        loginShow(context) {   //这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('loginShow')
            //你还可以在这里触发其他的mutations方法
        },
    }
})
